<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/editor.md/css/editormd.css"/>
    <link rel="stylesheet" href="/layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuimini/css/public.css" media="all">

</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <div class="layui-collapse" style="margin: 5px 0 5px 0">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">文章配置</h2>
                <div class="layui-colla-content">
                    <div>
                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">文章标题</label>
                                <div class="layui-input-block">
                                    <input
                                            id="titleInput"
                                            type="text" name="title" required lay-verify="required" placeholder="请输入标题"
                                            autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">文章目录</label>
                                <div class="layui-input-inline">
                                    <select name="city" lay-verify="required" lay-search id="categorySelect">
                                        <#list blogCategory as category>
                                            <option value="${category.id}">${category.title}</option>
                                        </#list>
                                    </select>
                                </div>

                                <label class="layui-form-label">文章置顶</label>
                                <div class="layui-input-inline">
                                    <select id="topSwitch" name="city" lay-verify="required" lay-search>
                                        <option value="0" selected>否</option>
                                        <option value="1">是</option>
                                    </select>
                                </div>

                                <label class="layui-form-label">文章类型</label>
                                <div class="layui-input-inline">
                                    <select id="typeSwitch" name="type" lay-verify="required" lay-search>
                                        <option value="BLOG" selected>博客文章</option>
                                        <option value="TEACH">技术周刊</option>
                                        <option value="GITHUB">Github月刊</option>
                                    </select>
                                </div>

                                <label class="layui-form-label">文章ICON</label>
                                <div class="layui-input-inline">
                                    <input
                                            id="iconInput"
                                            type="text" name="title" required lay-verify="required"
                                            placeholder="请输入文章ICON"
                                            autocomplete="off" class="layui-input">
                                </div>
                            </div>


                            <div class="layui-form-item">
                                <label class="layui-form-label">文章封面</label>
                                <div class="layui-input-block">
                                    <input
                                            id="coverUrlInput"
                                            type="text" name="title" required lay-verify="required"
                                            placeholder="请输入封面URL"
                                            autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">文章标签</label>
                                <div class="layui-input-block">
                                    <input id="tagsInput"
                                           type="text" name="title" required lay-verify="required" placeholder="请输入标签"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>



                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">文章描述</label>
                                <div class="layui-input-block">
                                    <textarea id="descInput" name="desc" placeholder="请输入内容"
                                              class="layui-textarea"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <#if article?exists>
                                        <button class="layui-btn" type="button" onclick="update()">立即更新</button>
                                    <#else >
                                        <button class="layui-btn" type="button" onclick="save()">立即提交</button>
                                    </#if>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>


        <div id="layout">
            <div id="editorMd">
                <textarea style="display:none;"></textarea>
            </div>
        </div>

    </div>
</div>

<script src="/editor.md/lib/jquery.min.js"></script>
<script src="/editor.md/editormd.min.js"></script>
<script src="/layuimini/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/editor.md/lib/marked.min.js"></script>
<script src="/editor.md/lib/prettify.min.js"></script>
<script src="/editor.md/lib/raphael.min.js"></script>
<script src="/editor.md/lib/underscore.min.js"></script>
<script src="/editor.md/lib/sequence-diagram.min.js"></script>
<script src="/editor.md/lib/flowchart.min.js"></script>
<script src="/editor.md/lib/jquery.flowchart.min.js"></script>

<script type="text/javascript">
    var testEditor;
    layui.use(['form', 'table'], function () {
        let form = layui.form;
        <#if article?exists>
        if (${article.id} !== 0) {
            $.ajax({
                type: 'get',
                url: '/admin/api/articles/' + ${article.id},
                success: function (result) {
                    let {code, data} = result
                    if (code !== 0) {
                        alert("数据不存在")
                        return
                    }

                    $('#titleInput').val(data.title)
                    $('#tagsInput').val(data.keys)
                    $('#coverUrlInput').val(data.avatar)
                    $('#topSwitch').val(data.topSwitch ? '1' : '0')
                    $('#typeSwitch').val(data.type)
                    $('#descInput').val(data.description)
                    $('#iconInput').val(data.icon)
                    $("#categorySelect").children("option").each(function () {
                        var temp_value = $(this).val();
                        $(this).removeAttr("selected");
                        if (temp_value === "4") {
                            $(this).attr("selected", "selected");
                        }
                    });
                    form.render('select');


                    let config = {
                        width: "100%",
                        height: 840,
                        syncScrolling: "single",
                        path: "/editor.md/lib/",
                        imageUpload: false,
                        saveHTMLToTextarea: true,
                        htmlDecode: "style,script,iframe,img|on*",
                        emoji: true,
                        markdown: data.mkContent,
                        taskList: true,
                        tocm: true,         // Using [TOCM]
                        tex: true,                   // 开启科学公式TeX语言支持，默认关闭
                        flowChart: true,             // 开启流程图支持，默认关闭
                        sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
                    }
                    testEditor = editormd("editorMd", config);
                }
            })
        }
        <#else >

        let config = {
            width: "100%",
            height: 840,
            syncScrolling: "single",
            path: "/editor.md/lib/",
            imageUpload: false,
            saveHTMLToTextarea: true,
            htmlDecode: "style,script,iframe,img|on*",
            emoji: true,
            taskList: true,
            tocm: true,         // Using [TOCM]
            tex: true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart: true,             // 开启流程图支持，默认关闭
            sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
        }

        testEditor = editormd("editorMd", config);
        </#if>
    });

    function save() {
        let title = $('#titleInput').val()
        let category = $('#categorySelect').val()
        let tags = $('#tagsInput').val()
        let coverUrl = $('#coverUrlInput').val()
        let topSwitch = $('#topSwitch').val()
        let desc = $('#descInput').val()
        let type = $('#typeSwitch').val()
        let icon = $('#iconInput').val()
        let mkContent = testEditor.getMarkdown()
        let htmlContent = testEditor.getHTML()
        saveArticle({
            title,
            categoryId: parseInt(category),
            tags,
            mkContent,
            htmlContent,
            coverUrl,
            type,
            icon,
            topSwitch: topSwitch === "1",
            desc
        })
    }

    <#if article?exists>
    if (${article.id} !== 0) {
        function update() {
            let id = ${article.id}
            let title = $('#titleInput').val()
            let category = $('#categorySelect').val()
            let tags = $('#tagsInput').val()
            let coverUrl = $('#coverUrlInput').val()
            let topSwitch = $('#topSwitch').val()
            let desc = $('#descInput').val()
            let type = $('#typeSwitch').val()
            let icon = $('#iconInput').val()
            let mkContent = testEditor.getMarkdown()
            let htmlContent = testEditor.getHTML()
            saveArticle({
                id,
                title,
                categoryId: parseInt(category),
                tags,
                mkContent,
                htmlContent,
                coverUrl,
                type,
                icon,
                topSwitch: topSwitch === "1",
                desc
            });
        }
    }
    </#if>

    function saveArticle(request) {
        $.ajax({
            type: 'POST',
            url: '/admin/api/articles',
            data: JSON.stringify(request),
            dataType: "json",
            contentType: 'application/json',
            success: function (res) {
                let {code, msg} = res
                if (code === 0) {
                    alert("操作完成")
                } else {
                    alert(msg)
                }
            }
        })
    }
</script>

</body>
</html>